import React from 'react';
import ReactDOM from 'react-dom';
import { Module } from 'react-360-web';

// import Thumbnails from './Thumbnails';

class Thumbnails extends React.Component {

  onClick (index, photo) {
    this.props.ctx.callFunction('RCTDeviceEventEmitter', 'emit', [
      'setBackground',
      index,
      photo
    ]);
  }

  render () {
    return (
      <div className='ui-thumbnails'>
        { this.props.photos.map((photo, idx) => (
          <div
            key={idx}
            className='ui-thumbnail'
            // style={{ backgroundImage: `url(${photo.uri})` }}
            onClick={() => this.onClick(idx, photo)}>
            <img className='ui-thumbnail-img' src={photo.uri} />
            {/* <div className="ui-thumbnail-label">XXX</div> */}
          </div>
        )) }
      </div>
    )
  }
}

export default class ThumbnailsModule extends Module {

  constructor(uiContainer, context, thumbnails) {
    super('ThumbnailsModule');
    const container = document.createElement('div')
    container.className = `ui-thumbnails-container ${thumbnails}`
    uiContainer.appendChild(container)

    this._uiContainer = container;
    console.log('context', context)
    this._ctx = context
  }

  init (props) {
    ReactDOM.render(
      <Thumbnails photos={props.photos} ctx={this._ctx} />,
      this._uiContainer
    )
  }
}
